<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>注册组件的语法糖</title>
  <script src="/js/vue.js"></script>
</head>
<body>
  <div id="app">
    <!-- 注册组件语法糖 也就是vue简化了这个过程 -->
    <!-- 主要简化了调用Vue.extend()步骤，我们可以直接用对象来替代 -->
    
		<!-- 第三步：使用组件 -->
    <!-- <my-cpn></my-cpn> -->
		<cpn></cpn>
  </div>
<br>
  <script>
    // 使用组件的三个步骤
    // 第一步：创建组件构造器 用Vue.extend()   extends 继承
    // const cpnConstructor = Vue.extend({
    //     template:`    
    //         <div>
    //             <h2>这是组件的标题</h2>
    //             <p>这是组件的内容</p>
    //             <button>这是组件的按钮</button>
    //         </div>
    //     `
    // })

		// 1.创建组件对象	
		// const obj = {//这个对象vue会自动调用extend函数
		// 	template:`    
		// 		<div>
		// 				<h2>这是组件的标题</h2>
		// 				<p>这是组件的内容</p>
		// 				<button>这是组件的按钮</button>
		// 		</div>
		// 	`		
		// }

    // 第二步：注册组件 Vue.component() 
    // 全局注册
    // Vue.component('my-cpn'/* 组件的自定义标签名*/,obj /* 组件对象*/)

    let app = new Vue({
      el:"#app",
      data:{ 
        msg:'hello world'
      },
      // 局部注册，局部组件，只有在vue实例范围内起作用，开发的时候尽量用局部组件
      components:{
        // 键值对，key是使用组件自定义标签，value值就是我们的组件构造器实例
        'cpn':{//这个对象vue会自动调用extend函数
					template:`    
						<div>
								<h2>这是组件的标题</h2>
								<p>这是组件的内容</p>
								<button>这是组件的按钮</button>
						</div>
					`		
				}
      }  
    })
  </script>
</body>
</html>